<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 550px;
            height: 500px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin: 100px auto;
        }
        .box div{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box">
            <div>
                姓名：<input type="text" placeholder="请输入姓名" v-model="list.username"> 
            </div>
            <div>
                性别：<input type="radio" name="gern" value="1" v-model="list.gern">男
                      <input type="radio" name="gern" value="2" v-model="list.gern">女
            </div>
            <div>
               年龄：<input type="text" placeholder="请输入年龄" v-model="list.age"> 
            </div>
            <div>
              组号：<input type="text" placeholder="请输入1-8组号" v-model="list.zuhao">  
            </div>
            <div>
              期望薪资：<input type="text" placeholder="请输入期望薪资" v-model="list.qwxz">  
            </div>
            <div>
               就业薪资：<input type="text" placeholder="请输入就业薪资" v-model="list.jyxz"> 
            </div>
            <div>
                籍贯：
                <select v-model="list.ctys">
                    <option value="1">北京</option>
                    <option value="2">四川</option>
                    <option value="3">云南</option>
                    <option value="4">山东</option>
                </select>
                <select v-model="list.ctys1">
                    <option value="1">jkl</option>
                    <option value="2">bnm</option>
                    <option value="3">fha</option>
                    <option value="4">vcxbx</option>
                </select>
                <select v-model="list.ctys2">
                    <option value="1">123</option>
                    <option value="2">567</option>
                    <option value="3">980</option>
                    <option value="4">112</option>
                </select>
            </div>
            <div><button>取消</button> <button @click="add">确认</button></div>
        </div>   
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
        el:'#app',
        data:{
            list:{
                    username :'扶丘',
                    gern:1,
                    age:'20',
                    zuhao:'7',
                    qwxz:'13000',
                    jyxz:'16000',
                    ctys:1,
                    ctys1:1,
                    ctys2:1
                },
                // beijin:[
                //     {name:"jimgh"},
                //     {name:"fgh"},
                //     {name:"cvcb"}
                // ],
                // jimgh:[
                //     {name:123},
                //     {name:568},
                //     {name:890}
                // ]

        },
        methods:{
            add(){
                console.log(this.list);
            }
        }
        })
    </script>
</body>
</html>